<template>
  <card one="个人中心" two="基本资料">
    <template #main>
      <el-form
        :model="userInfo"
        :rules="infoRuels"
        ref="infoRef"
        label-width="100px"
      >
        <el-form-item>
          <el-input v-model="userInfo.id" style="display: none"></el-input>
        </el-form-item>
        <el-form-item label="登录名称">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="userInfo.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="subMsg">提交修改</el-button>
          <el-button @click="$refs.infoRef.resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </card>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { updateMsg } from '@/api/login'
export default {
  name: 'UserInfo',
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.getMsg()
  },
  methods: {
    ...mapActions('user', ['getMsg']),
    subMsg () {
      this.$refs.infoRef.validate(async (val) => {
        if (!val) return ''
        const { data } = await updateMsg(this.userInfo)
        if (data.code !== 0) return this.$message.error(data.message)
        this.$message.success(data.message)
        this.getMsg()
      })
    }
  },
  data () {
    return {
      // 验证规则对象
      infoRuels: {
        nickname: [
          {
            required: true,
            message: '昵称不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\S{1,10}$/,
            message: '昵称是1-10个非空字符',
            trigger: ['blur', 'change']
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^([a-z0-9_.-]+)@([\da-z.-]+)\.([a-z.]{2,6})$/,
            message: '邮箱格式不正确',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
